<template>
  <div class="solution-detail">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="150px"
    >
      <el-form-item label="是否落收完成" prop="isCompleteRevenue">
        <el-select
          v-model="formData.isCompleteRevenue"
          placeholder="请选择是否落收完成"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in isCompleteRevenueOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否已回款" prop="isGetMoney">
        <el-select
          v-model="formData.isGetMoney"
          placeholder="请选择是否已回款"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in isGetMoneyOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否开销项票" prop="isInvoice">
        <el-select
          v-model="formData.isInvoice"
          placeholder="请选择是否开销项票"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in isInvoiceOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否提交落收" prop="isSubmitRevenue">
        <el-select
          v-model="formData.isSubmitRevenue"
          placeholder="请选择是否提交落收"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in isSubmitRevenueOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目当期利润" prop="profit">
        <el-input
          v-model="formData.profit"
          placeholder="请输入项目当期利润"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="收入" prop="revenue">
        <el-input
          v-model="formData.revenue"
          placeholder="请输入收入"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="收入解析时间" prop="revenueAnalysisTime">
        <el-date-picker
          v-model="formData.revenueAnalysisTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          placeholder="请选择收入解析时间"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";
import { getProjectDetail, projectFilling } from "@/api/project/index";
export default {
  components: { BasicBusiness, Step },
  props: [],
  data() {
    return {
      formData: {
        isCompleteRevenue: undefined,
        isGetMoney: undefined,
        isInvoice: undefined,
        isSubmitRevenue: undefined,
        profit: undefined,
        revenue: undefined,
        revenueAnalysisTime: null,
      },
      rules: {
        isCompleteRevenue: [
          {
            required: true,
            message: "请选择是否落收完成",
            trigger: "change",
          },
        ],
        isGetMoney: [
          {
            required: true,
            message: "请选择是否已回款",
            trigger: "change",
          },
        ],
        isInvoice: [
          {
            required: true,
            message: "请选择是否开销项票",
            trigger: "change",
          },
        ],
        isSubmitRevenue: [
          {
            required: true,
            message: "请选择是否提交落收",
            trigger: "change",
          },
        ],
        profit: [
          {
            required: true,
            message: "请输入项目当期利润",
            trigger: "blur",
          },
        ],
        revenue: [
          {
            required: true,
            message: "请输入收入",
            trigger: "blur",
          },
        ],
        revenueAnalysisTime: [
          {
            required: true,
            message: "请选择收入解析时间",
            trigger: "change",
          },
        ],
      },
      isCompleteRevenueOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isGetMoneyOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isInvoiceOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      isSubmitRevenueOptions: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});

      getProjectDetail(this.boId).then((res) => {
        ;
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;

        // TODO 提交表单
        projectFilling({
          ...this.formData,
          boId: this.boId,
          projectId: this.projectId,
        }).then(() => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace("/pigeonhole/index");
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
